import { App } from 'vue';
import 'element-plus/lib/theme-chalk/base.css';
import {
  ElAside,
  ElAvatar,
  ElButton,
  ElCheckbox,
  ElContainer,
  ElDatePicker,
  ElDropdown,
  ElDropdownItem,
  ElDropdownMenu,
  ElForm,
  ElFormItem,
  ElHeader,
  ElInput,
  ElLink,
  ElMain,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElOption,
  ElRadio,
  ElRow,
  ElCol,
  ElSelect,
  ElSubmenu,
  ElTabPane,
  ElTabs
} from 'element-plus';

const components = [
  ElButton,
  ElForm,
  ElFormItem,
  ElInput,
  ElRadio,
  ElTabs,
  ElTabPane,
  ElCheckbox,
  ElLink,
  ElContainer,
  ElHeader,
  ElMain,
  ElAside,
  ElMenu,
  ElMenuItem,
  ElMenuItemGroup,
  ElSubmenu,
  ElDropdown,
  ElDropdownMenu,
  ElDropdownItem,
  ElAvatar,
  ElCol,
  ElRow,
  ElSelect,
  ElOption,
  ElDatePicker
];
/*
  批量引入element-plus中的组件，这样只需要引入一次base.css，
  既解决了全局引入带来包太大的问题，
  也解决了局部导入的繁琐（先导入所需的组件，再导入所需组件的样式和base样式）
  但是所需组件的样式需要用到*****babel-plugin-import插件*****，在babel中配置

*/
export default function (app: App): void {
  for (const elComponent of components) {
    app.component(elComponent.name, elComponent);
  }
}
